<template>
  <div class="padding20">
    <Alert type="warning">
      关于负载均衡收费的说明：
      <template slot="desc">
        阿里云负载均衡国内5大区域全面开启性能保障型实例，目前用户可以在北京、杭州、深圳、上海、青岛5大地域通过控制台购买性能保障型实例（API暂未开放）同时继续保留共享型实例售卖，现计划延长公测期，继续保持规格免费，后续收费计划将通过官网公告、短信、邮件方式进行通知，关于性能保障型实例如何使用请 <a class="text-link">查看详情</a>
      </template>
    </Alert>
    <div class="list-title" span="4" style="width:200px;">实例管理</div>
    <div class="font-size0">
      <a @click="toggle" class="btn-select active">华北 1（青岛）</a>
      <a @click="toggle" class="btn-select">华北 2（北京）</a>
      <a @click="toggle" class="btn-select">华北 3（张家口）</a>
      <a @click="toggle" class="btn-select">华北 4（呼和浩特）</a>
      <a @click="toggle" class="btn-select">华东 1（杭州）</a>
      <a @click="toggle" class="btn-select">香港</a>
      <a @click="toggle" class="btn-select">亚太东北 1（东京）</a>
      <a @click="toggle" class="btn-select">亚太东南 1（新加坡）</a>
    </div>
    <Table class="mar-top20" border :columns="columns6" :data="data5"></Table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        columns6: [
          {
            title: 'Date',
            key: 'date'
          },
          {
            title: 'Name',
            key: 'name'
          },
          {
            title: 'Age',
            key: 'age',
            filters: [
              {
                label: 'Greater than 25',
                value: 1
              },
              {
                label: 'Less than 25',
                value: 2
              }
            ],
            filterMultiple: false,
            filterMethod (value, row) {
              if (value === 1) {
                return row.age > 25;
              } else if (value === 2) {
                return row.age < 25;
              }
            }
          },
          {
            title: 'Address',
            key: 'address',
            filters: [
              {
                label: 'New York',
                value: 'New York'
              },
              {
                label: 'London',
                value: 'London'
              },
              {
                label: 'Sydney',
                value: 'Sydney'
              }
            ],
            filterMethod (value, row) {
              return row.address.indexOf(value) > -1;
            }
          }
        ],
        data5: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          }
        ],
      }
    },
    methods: {
        toggle: function (item) {
          console.log(item.target.className)
          var cls = item.target.className
          if( cls.indexOf('active')>0){
            item.target.className = 'btn-select'
          } else {
            item.target.className = cls + ' active'
          }
        }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
